<template>
  <div class="AddedServices">
    <!-- 增值服务 -->
    <!-- 商户信息 -->
    <div class="businessInfo">
      <div class="title">购买商户信息</div>
      <div class="account">
        店铺账号：
        <el-input disabled v-model="user_id" placeholder="请输入内容" style="width: 300px" size="mini"></el-input>
      </div>
      <div class="shopName">
        店铺名称：
        <el-input
          disabled
          v-model="sv_us_name"
          placeholder="请输入内容"
          style="width: 300px"
          size="mini"
        ></el-input>
      </div>
    </div>
    <!-- 套餐选择 -->
    <div
      class="packageSelection"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <div class="title">增值服务套餐选择</div>
      <div class="packageItem">
        <div
          class="item"
          v-for="(item, index) in packageData"
          :key="index"
          @click="handleShowBorder(index, item)"
          :class="current === index ? 'active' : ''"
        >
          <span class="itemIcon">
            <img :src="'/static/addedServices/'+ item.sv_code_type +'.png'" alt />
          </span>
          <div class="itemInfo">
            <div class="itemName" style="font-size: 12px">{{item.itemName}}</div>
            <div class="itemDescribe">{{item.sv_remark}}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      :title="packageYear.substring(0, packageYear.indexOf('/'))"
      :visible.sync="dialogVisible"
      width="450px"
    >
      <div class="chooseAdded">
        <img :src="'/static/addedServices/'+ packageCode +'.png'" alt />
        <div class="chooseAdded-radio">
          <el-radio v-model="packageValue" :label="true">{{packageYear}}</el-radio>
          <el-radio v-model="packageValue" :label="false">{{packageForever}}</el-radio>
          <p class="added-text">{{packageTitle}}</p>
        </div>
      </div>
      <p
        class="added-timer"
        :style="{display: packageTime ? 'block' : 'none' }"
      >到期时间：{{packageTime}}</p>
      <div class="comboPrice" v-show="isShow">
        购买操作员数：
        <el-input-number size="mini" v-model="num" @change="handleChange" :min="1"></el-input-number>
        <p>
          已有操作员数
          <span style="color: red">{{operatornumber}}位</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- packageValue判断按年还是终身 packagePrice年费  packagePrice1终身费 -->
        <div class="packagePrice">{{packageValue ? packagePrice * num : packagePrice1 * num}}代币</div>
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button size="mini" type="primary" @click="handlePayFor">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      user_id: "",
      sv_us_name: "",
      // 套餐的数据
      packageData: [],
      packageType: 1, // 查询数据类型1.所有年限增值包，2.所有增值包, 0.购买增值包
      packageCode: "", // 输入区分当前增值包
      dialogVisible: false,
      // 点击购买的增值包信息
      packageTitle: "",
      packageValue: true,
      packageYear: "",
      packageForever: "",
      packageTime: "",
      packagePrice: "",
      packagePrice1: "",
      // 是否总店
      isStore: false,
      // 购买操作员
      isShow: false,
      operatornumber: "", // 普通
      num: 1,
      // 默认激活第一个边框
      current: 0,
      // 购买操作携带数据
      buyData: {
        price: 1,
        order_count: 1,
        strcode: "ValueAddedServices_Recommend_3_BuyOperater"
      },
      // 身份令牌
      myToken: ""
    };
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 时间格式化
      this.timeFormatting = this.utils.timeFormatting();
      // 将数据赋值
      const { user_id, sv_us_name, isStore } = this.$route.query;
      this.user_id = user_id;
      this.sv_us_name = sv_us_name;
      this.isStore = isStore;
      // 获取增值卡包数据
      this.getData();
    },
    getData() {
      this.loading = true;
      // 获取增值卡包数据
      this.$api
        .getValueAddedServices(
          this.user_id,
          this.packageType,
          this.packageCode,
          this.myToken
        )
        .then(res => {
          const { childInfolist } = res.configList[0];
          this.operatornumber = res.sv_buyoperatornumber;
          this.isStore = res.isStore;
          if (this.packageType == 1) {
            this.packageData = childInfolist.map(v => {
              // 判断是否是已经购买
              if (
                v.childDetailList == null ||
                v.childDetailList[0] == undefined
              ) {
                return {
                  ...v,
                  itemName: v.sv_user_config_name.substr(
                    0,
                    v.sv_user_config_name.indexOf("/")
                  )
                };
                // 判断是否是操作员购买
              } else if (
                v.sv_user_config_code ==
                "ValueAddedServices_Recommend_BuyOperater_Permanent"
              ) {
                return {
                  ...v,
                  itemName: v.sv_user_config_name.substr(
                    0,
                    v.sv_user_config_name.indexOf("/")
                  )
                };
              } else {
                if (v.sv_user_config_code.indexOf("_Permanent") > 0) {
                  v.childDetailList[0].sv_expire_date = "永久有效";
                } else {
                  v.childDetailList[0].sv_expire_date = new Date(
                    v.childDetailList[0].sv_expire_date
                  ).Format("yyyy-MM-dd hh:mm:ss");
                }
                return {
                  ...v,
                  itemName: v.sv_user_config_name.substr(
                    0,
                    v.sv_user_config_name.indexOf("/")
                  )
                };
              }
            });
          } else if (this.packageType == 0) {
            // 判断是否是已经购买
            this.packageYear = childInfolist[0].sv_user_config_name;
            this.packagePrice = childInfolist[0].sv_config_value;
            this.packageForever = childInfolist[1].sv_user_config_name;
            this.packagePrice1 = childInfolist[1].sv_config_value;
            if (childInfolist[1].childDetailList != null) {
              if (childInfolist[1].childDetailList.length == 1) {
                this.packageTime = "永久有效";
                // 已经购买终身增值
                this.packageYear += "已开通";
                this.packageForever += "已开通";
              } else if (childInfolist[0].childDetailList.length == 1) {
                this.packageTime = new Date(
                  childInfolist[0].childDetailList[0].sv_expire_date
                ).Format("yyyy-MM-dd hh:mm:ss");
                // 已经购买年限增值
                this.packageYear += "已开通";
              } else {
                this.packageTime = "";
              }
            }
          }
          this.loading = false;
        });
    },
    // 购买服务
    handlePayFor() {
      // this.packageValue 为 true 是按年  为 false 是终身
      var code = this.packageCode;
      if (this.packageValue) {
        this.packageCode = code;
        if (this.packageYear.indexOf("已开通") >= 0) {
          this.$message({
            type: "warning",
            message: "服务已开通，请勿重复购买"
          });
          return;
        }
      } else {
        this.packageCode = code + "_Permanent";
        if (this.packageForever.indexOf("已开通") >= 0) {
          this.$message({
            type: "warning",
            message: "服务已开通，请勿重复购买"
          });
          return;
        }
      }
      this.$confirm(`是否购买服务?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 购买的服务
          this.buyData.strcode = this.packageCode;
          // 服务的价格
          this.buyData.price = this.packageData[this.current].sv_config_value;
          // 将数据传入
          this.$api
            .purchaseValueAdded(this.user_id, this.buyData, this.myToken)
            .then(res => {
              if (res == 1) {
                this.$message({
                  message: "购买成功",
                  type: "success"
                });
                this.$router.push("myMerchant");
              } else {
                this.$message.error("余额不足，请充值");
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 选中边框
    handleShowBorder(index, item) {
      // 禁止分店购买操作员
      if (item.sv_code_type == "ValueAddedServices_Recommend_BuyOperater") {
        if (this.isStore) {
          this.$message({
            type: "warning",
            message: "分店不允许购买操作员"
          });
          return;
        }
      }
      this.current = index;
      this.num = 0;
      this.buyData.strcode = item.sv_user_config_code;
      // 如果是购买操作员，显示操作员数
      if (
        item.sv_user_config_code.indexOf(
          "ValueAddedServices_Recommend_BuyOperater"
        ) >= 0
      ) {
        this.buyData.price = item.sv_config_value;
        this.isShow = true;
      } else {
        this.isShow = false;
      }
      this.packageTitle = item.sv_remark;
      this.packageCode = item.sv_code_type;
      this.packagePrice = item.sv_config_value;
      this.packageType = 0;
      this.getData();
      this.dialogVisible = true;
    },
    // 数字选择器
    handleChange(value) {
      this.buyData.order_count = value;
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
.AddedServices {
  background-color: #fff;
  padding: 0 20px;
  font-size: 15px;
  height: 830px;
  .title {
    font-weight: 600;
    padding: 20px 0;
  }
  // 购买商户信息
  .businessInfo {
    font-size: 15px;
    .account {
      margin: 10px 0;
    }
  }
  // 增值服务选择
  .packageSelection {
    .packageItem {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      .item {
        display: flex;
        flex-direction: column;
        width: 15%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        font-size: 14px;
        margin-bottom: 40px;
        padding: 5px;
        background-color: #efeff0;
        margin-right: 25px;
        cursor: pointer;
        border: 1px solid #fff;
        border-radius: 4px;
        &.active {
          border: 1px solid #5973ea;
        }
        .itemIcon {
          text-align: center;
          color: #fff;
          box-sizing: border-box;
          border-radius: 8px;
          font-size: 30px;
          border-radius: 4px;
          margin-right: 10px;
          img {
            width: 64px;
            height: 64px;
          }
        }
        .itemInfo {
          overflow: hidden;
          text-align: center;
          margin-bottom: 10px;
          width: 100%;
          .itemName {
            font-weight: 600;
            margin-bottom: 10px;
          }
          .itemDescribe {
            white-space: nowrap;
            color: #999;
            font-size: 12px;
            padding-top: 10px;
            border-top: 1px solid #ccc;
          }
        }
      }
    }
  }
  // 弹窗
  .chooseAdded {
    display: flex;
    justify-content: space-evenly;
    .chooseAdded-radio {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      // text-align: right;
      .el-radio {
        margin-right: 0;
      }
    }
  }
  .added-timer {
    text-indent: 50px;
    margin-top: 10px;
    color: red;
  }
  .added-text {
    margin-top: 10px;
    color: #999;
  }
  .comboPrice {
    padding-top: 20px;
    p {
      margin-top: 10px;
    }
  }
  .packagePrice {
    text-align: right;
    color: #f00;
    margin-bottom: 10px;
  }
}
</style>